<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        标准文档流：
            你写的任何一个盒子，都在是标准文档流中进行排布的。
            类似一个国家，有很制度，把盒子分成三类：
                1）块级盒子   独占一行
                2）行内级盒子  并排显示
                3）行内块级盒子   并排显示
            默认情况下，标准文档流中的盒子，不会层叠在一起

            在标准文档流中，对盒子进行定位，可能通过margin和padding动盒子的位置，并且margin可以为负值
            在标准文档流中，过margin和padding动盒子的位置，会影响到其它盒子。

            如果想让一个盒子在网页上的任何位置，不影响其它盒子，此时按标准文档流进行布局就不OK了。

        层布局：
            层布局，就可以让盒子层叠在一起。通过定位实现。

            定位分三次：
                1）相对定位
                    position:relative;   left  right top  bottom

                2）绝对定位  完全脱标
                    position:absolute;    left  right top  bottom

                3）固定定位  完全脱标
                    position:fixed;    left  right top  bottom

     -->
</body>
</html>